/* eslint-disable */
import React, { Component } from "react"
import { ScrollView, StyleSheet, Text, View } from "react-native"
import { Accordion } from "@ant-design/react-native"
import { px2dp } from "../../utils"
import { color } from "../../theme"

interface P {
  leagueData: Record<string, any>[]
}

interface S {
  activeSections: number[]
}

const styles = StyleSheet.create({
  // container: {
  //   flex: 1
  // },
  headerStyle: {
    alignItems: "center",
    backgroundColor: color.palette.orange,
    flexDirection: "row",
    height: px2dp(40),
    paddingLeft: 15
  },
  itemStyle: {
    alignItems: "center",
    backgroundColor: color.palette.lightGrey,
    flexDirection: "row",
    height: px2dp(30),
    paddingLeft: 15
  }
})

/**
 * @Description 赛事列表组件 多地方使用
 * @anthor ryan
 * @Date 2019-08-15
 */
export class EventListFragment extends Component<P, S> {
  constructor(props) {
    super(props)
    let tempData = this.props.leagueData.keys()
    this.state = {
      activeSections: [...tempData]
    }
  }

  _renderHeader = section => {
    return (
      <View style={styles.headerStyle}>
        <Text>{section.c.n}</Text>
      </View>
    )
  }

  _renderContent = section => {
    console.log()
    return section.es.map((route, i) => {
      return (
        <View style={styles.itemStyle} key={i}>
          <Text>{route.i[0]}</Text>
        </View>
      )
    })
  }

  _updateSections = activeSections => {
    this.setState({ activeSections: activeSections })
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView
          onMomentumScrollEnd={({ nativeEvent }) => {
            console.log("curr offset: " + nativeEvent.contentOffset.x)
          }}
        >
          <Accordion
            style={{ marginTop: 40 }}
            sections={this.props.leagueData}
            activeSections={this.state.activeSections}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
            onChange={this._updateSections}
            expandMultiple={true}
          />
        </ScrollView>
      </View>
    )
  }
}

export default EventListFragment
